<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div id="app"></div>

    <template id="my-app">
      <component-a></component-a>

      <component-b></component-b>

      <!-- componentName需转换为component-name -->
      <component-name></component-name>
    </template>

    <template id="component-a">
      <h2>{{title}}</h2>
      <p>{{desc}}</p>
      <button @click="btnClick">点击</button>
    </template>

    <template id="component-b">
      <div>
        <input type="text" v-model="message" />
        <h2>{{message}}</h2>
      </div>
    </template>

    <template id="componentName">
      <h2>你好</h2>
    </template>

    <script src="../js/Vue.js"></script>
    <script>
      const App = {
        template: '#my-app'
      }

      const app = Vue.createApp(App)

      // 使用app注册一个全局组件 app.component(组件名, 组件对象)
      // 全局组件：意味着注册的这个组件可以在任何的组件模板中使用
      app.component('component-a', {
        template: '#component-a',
        data() {
          return {
            title: '我是标题',
            desc: '我是内容'
          }
        },
        methods: {
          btnClick() {
            console.log('点击')
          }
        }
      })

      app.component('component-b', {
        template: '#component-b',
        data() {
          return {
            message: 'Hello world'
          }
        }
      })

      app.component('componentName', {
        template: '#componentName'
      })

      app.mount('#app')
    </script>
  </body>
</html>
